<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景属性</title>
		<style>
			div{
				width: 500px;
				height: 500px;
				/* 背景图属性 */
				background-image: url(img/xiaoxin.png);
				/* 背景图大于空间 尺寸属性值：px % 
				                            contain 等比例缩放图片
											cover 等比例放大图片*/
				background-size:30% 30% ;
				/* 背景图小于空间--平铺 */
				background-repeat: no-repeat;
				/*  背景图小于空间 背景定位属性，属性值 x% y% 数值px数值px  英文*/
				background-position:20% 0%;
				background-position:100px 0;
				background-position:center center;
			}
			/* 背景图像固定属性 fixed固定模式 水印
			形成条件 1.高度空间足够形成滚动条
			        2.引入背景图滚动模式：等比例放大图片 ，覆盖整个容器
					                    等比例缩放图片，保证图片全部显示在容器中
					3.背景图固定属性：background-attachment:fixed*/
					
			body{
				/* 高度：10000px 形成滚动条*/
				height: 10000px;
				/* 滚动模式背景如何滚动 */
				background-size:contain;
				background: url(img/xiaoxin.png);
				/* 水印效果 背景图固定*/
				background-attachment:fixed;
				/* background背景属性：背景图片 背景重复 背景定位 背景尺寸 背景固定
				常用写法：background: 背景图片 背景重复；*/
			}
		</style>
	</head>
	<body>
		Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus, adipisci molestias? Qui culpa autem molestiae! Modi rem a, optio molestias temporibus commodi, quae nostrum magni, iure et esse fugit aperiam?Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi mollitia ut neque exercitationem enim omnis nostrum asperiores sed earum? Laudantium, minima! Rerum, doloribus explicabo? Nisi accusantium modi earum labore explicabo?Lorem ipsum dolor sit, amet consectetur adipisicing elit. Beatae totam adipisci sed earum, ipsum a, et ut voluptate praesentium consequuntur repellat sit sint necessitatibus omnis. Minima, ducimus. Quas, natus vel.
		<div></div>
		l
	</body>
</html>